<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格配置</title>

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../../../static/lib/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../../static/lib/layuiadmin/style/admin.css" media="all">
    <script src="../../../../static/lib/layuiadmin/layui/layui.js"></script>
    <script src="../../../common/common.js"></script>
    <script src="../../../common/jquery-3.3.1.min.js"></script>
    <style>
        html,body{height: 100%;}
        .layui-fluid{height: 96%;}
        .layui-row,.layui-card,.layui-col-xs12{height: 100%;}
    </style>

</head>
<body>

<div class="layui-fluid" id="LAY-component-grid-mobile">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-xs12" style="height: 100%;">
            <div class="layui-card">
                <div class="layui-card-header">表头配置</div>
                <div class="layui-card-body">
                    <div class="" style="border-bottom:0;padding:0;margin-bottom: 10px;">
                        <form class="layui-form" action="">
                            <table style="width:98%; table-layout:fixed;">
                                <tr>
                                    <td style='width:80px'>
                                        <a id="save" class="layui-btn layui-btn-sm st_back1"  onclick="save()" > 确  定</a>
                                    </td>
                                </tr>
                            </table>
                        </form>
                    </div>
                    <table class="layui-hide" id="configTable" lay-filter="configTable"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script>
    var frameId = window.frameElement && window.frameElement.id || '';
    var formId = RequestURLParam.getParam("formId");
    var iframe = RequestURLParam.getParam("iframeId");
    node = $('#'+iframe,parent.document)[0].contentWindow.node;
    cols = $('#'+iframe,parent.document)[0].contentWindow.cols;
    var rows = [];
    var row = {};
    var table;
    $(function () {
        if(cols == undefined){
            cols= [];
        }else{
            cols = JSON.parse(cols);
            console.log(cols)
            cols.forEach(function (item, index) {
                row = {"enName":item.field, "cnName":item.title, "width":item.width};
                rows.push(row);
            });
        }
        layui.use('table',function () {
            table = layui.table;
            table.render({
                elem: '#configTable'
                ,id:'configTable'
                ,limit:'30'
                ,cols: [[
                    {field: 'cnName', title: '中文名称', edit: 'text', width: 160}
                    ,{field: 'enName', title: '英文名称', edit: 'text', minWidth: 150}
                    ,{field: 'width', title: '宽度', edit: 'text', minWidth: 120}
                    ,{field: 'op', title: '操作', minWidth: 160, toolbar: '#bar'}
                ]],
                data: rows,
                done: function () {
                    $("[data-field='op']").children().each(function (index) {
                        if($.trim($(this).text())=="操作"){
                            $(this).html('<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" onclick="addTr();">\n' +
                                '<i class="layui-icon">&#xe654;</i> 添加一行\n' +
                                '</button>')
                        }
                    });
                }
            });

            table.on('tool(configTable)', function(obj){
                var data = obj.data;
                if(obj.event === 'del'){
                    layer.confirm('确定删除这行么', function(index){
                        obj.del();
                        layer.close(index);
                    });
                }
            });

        })
    });

    //添加一行
    function addTr() {
        var oldData =  table.cache["configTable"];
        var data1={
            "cnName": ""
            ,"enName": ""
            ,"width": ""
        };
        oldData.push(data1);
        table.reload('configTable',{
            data : oldData
        });
    }
    //确定
    function save() {
        var oldData =  table.cache["configTable"];
        var col = {};
        var cols = [];
        oldData.forEach(function (item, index) {
            if(Object.keys(item).length != 0){
                col = {field:item.enName, title:item.cnName, edit:"text", width:item.width, type:item.type }
                cols.push(col)
            }
        });
        node.attr('cols', JSON.stringify(cols));
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }

</script>